// pages/projectList/ceshi/ceshi.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    url: null,
    url1: null,
    width: '100%',
    height: '400px',
    cWidth: '800px',
    cHeight: '800px'

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  /* 图片 */
  getimg: function () {
    var that = this
    wx.chooseImage({
      count: 2,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        wx.compressImage({
          src: tempFilePaths[0], // 图片路径
          quality: 50, // 压缩质量
          success: res1 => {
            const compressImgPath = res1.tempFilePath
            this.setData({
              url: compressImgPath
            })
            wx.getImageInfo({
              src: compressImgPath,
              success: resp => {
                const imgHeight = resp.height
                const imgWdith = resp.width
                const imgPath = resp.path
                const time1 = new Date().getTime()
                if (imgHeight > imgWdith) {
                  // this.setData({
                  //   cWidth:imgHeight+'px',
                  //   cHeight:imgHeight+'px'
                  // })
                  // wx.nextTick(rotateImg(imgPath, imgHeight, imgWdith))
                  
                  rotateImg(imgPath, imgHeight, imgWdith)
                }
                function rotateImg(path, iHeight, iWidth) {

                  const query = wx.createSelectorQuery()
                  query.select('#myCanvas')
                    .fields({ node: true, size: true })
                    .exec((res) => {
                      const canvas = res[0].node
                      const ctx = canvas.getContext('2d')

                      //dpr是画高清图需要
                      let dpr = wx.getSystemInfoSync().pixelRatio
                      if (dpr > 2) {
                        dpr = 2
                      }
                      // dpr = 3
                      const width = Math.floor(iWidth / iHeight * res[0].width)
                      canvas.width = res[0].width * dpr
                      // canvas.height = width * dpr
                      canvas.height = res[0].height * dpr
                      // canvas.width = res[0].width
                      // canvas.height = res[0].height 
                      console.log(res)
                      //在旋转操作绘图上下文之前先保存初始状态，缩放和旋转等操作会叠加，所以每一次绘图后需要回复到原始状态。
                      //使用ctx.restore()恢复
                      ctx.save()
                      //按设备像素比缩放
                      ctx.scale(dpr, dpr)
                      //微信小程序新API Canvas 2D 接口同web canvas一样，drawImage时需要 Image 对象，而不是旧接口的地址
                      //固需要使用createImage()方法新建一个img对象，且画图需要在onload回调中操作。如果同时画多个图，就建立多个img
                      const imgObj = canvas.createImage()
                      console.log(imgObj)
                      imgObj.src = path
                      imgObj.onload = (response) => {
                        //先移动圆点再旋转90度
                        ctx.translate(res[0].width, 0)
                        // ctx.translate(300,0)
                        ctx.rotate(90 * Math.PI / 180)
                        //先清空画布再画图，（主要是清空上一次的图片）
                        // const width = Math.floor(iWidth / iHeight * res[0].width)
                        // const width = Math.floor(iWidth/iHeight*300)
                        ctx.clearRect(0, 0, res[0].width, res[0].width)
                        // ctx.clearRect(0,0,300,300)
                        ctx.drawImage(imgObj, 0, 0, iWidth, iHeight, 0, 0, width, res[0].width)
                        // 恢复原始绘图上下文
                        setTimeout(() => {
                          let desW = iHeight
                          let desH = iWidth
                          if(iHeight>800) {
                            desW = 800
                            desH = Math.round((iWidth/iHeight)*800)
                          }
                          wx.canvasToTempFilePath({
                            x: 0,
                            y: 0,
                            width: res[0].width,
                            height: width,
                            destWidth: desW,
                            destHeight: desH,
                            canvas: canvas,
                            success(res) {
                              console.log(res.tempFilePath)
                        const time2 = new Date().getTime()
                        console.log(time2 - time1)
                              that.setData({
                                url1: res.tempFilePath
                              })
                              ctx.restore()
                              wx.getImageInfo({
                                src: res.tempFilePath,
                                success(res) {
                                  console.log(res)
                                  console.log(res.height)
                                }
                              })
                            },
                            fail:err=>{
                              console.log(err)
                            }
                          })
                        }, 100)


                        // const oo = canvas.toDataURL('image/jpeg', 1)
                        // console.log(oo)
                        // console.log(oo.length)
                        // const arrayBuffer = wx.base64ToArrayBuffer(oo)
                        // console.log(arrayBuffer)
                        // that.setData({
                        //   url1: oo
                        // })
                        // base64src(oo, (filePath, res) => {
                        //   console.log(filePath)
                        //   const time2 = new Date().getTime()
                        //   console.log(time2 - time1)
                        //   that.setData({
                        //     url1: oo
                        //   })
                        //   console.log(res)
                        // })
                        // ctx.restore()
                        function base64src(base64, cb) {
                          const fs = wx.getFileSystemManager()
                          const FILE_BASE_NAME = 'tmp_base64src'
                          const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || []
                          if (!format) {
                            return (new Error('ERROR_BASE64SRC_PARSE'))
                          }
                          const buffer = wx.base64ToArrayBuffer(bodyData)
                          const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}`
                          fs.writeFile({
                            filePath,
                            data: buffer,
                            encoding: 'binary',
                            success: res => {
                              cb(filePath, res)
                            }
                          })
                        }
                      }

                    })
                }
              }
            })
          }
        })
      }
    })
  },

  /* 预览图片 */
  preview: function () {
    const aa = []
    aa.push(this.data.url)
    wx.previewImage({
      current: this.data.url, // 当前显示图片的http链接
      urls: aa // 需要预览的图片http链接列表
    })
  },
  /* 预览图片 */
  preview1: function () {
    const aa = []
    aa.push(this.data.url1)
    wx.previewImage({
      current: this.data.url1, // 当前显示图片的http链接
      urls: aa // 需要预览的图片http链接列表
    })
  }
})